<template>
  <div class="permit-container">
    <div class="permit-content">
      <div class="permit-head">许可证信息</div>

      <div class="button-list">
        <div class="button-card">
          <a-button type="primary" @click="downloadPermit">
            <template #icon>
              <DownloadOutlined />
            </template>
            获取指纹信息
          </a-button>
        </div>
        <div class="button-card">
          <a-upload v-model:fileList="jarFileList" name="file" action="" accept="" :beforeUpload="beforeUploadJar" :showUploadList="false">
            <a-button>
              <upload-outlined />
              上传应用许可证文件
            </a-button>
          </a-upload>
        </div>
      </div>

      <!-- 显示许可证数据表格 -->
      <a-table :columns="columns" :dataSource="permitData" rowKey="ndx" style="margin-top: 20px;" />
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { iotApi } from '/@/api/business/iotSystem/index';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { message } from 'ant-design-vue';
  import { smartSentry } from '/@/lib/smart-sentry';

  const jarFileList = ref([]);
  const permitData = ref([]); // 存储许可证数据

  const columns = [
    { title: '锁 ID', dataIndex: 'haspid', key: 'haspid' },
    { title: '产品', dataIndex: 'prname', key: 'prname' },
    { title: '功能', dataIndex: 'fn', key: 'fn' },
    { title: '位置', dataIndex: 'loc', key: 'loc' },
    { title: '访问', dataIndex: 'acc', key: 'acc' },
    { title: '计数', dataIndex: 'cnt', key: 'cnt' },
    { title: '限制', dataIndex: 'lic', key: 'lic' }, // 修改为显示lic内容
  ];

  // 上传前回调
  async function beforeUploadJar(file) {
    const fileForm = new FormData();
    fileForm.append('file', file);
    SmartLoading.show();
    try {
      await iotApi.haspUpdate(fileForm);
      message.success('操作成功');
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
    return false;
  }

  // 获取当前时间戳
  function getCurrentTimestamp() {
    return new Date().getTime(); // 当前时间的时间戳
  }

  // 获取许可证数据并解析
  async function fetchPermitData() {
    SmartLoading.show(); // 显示加载动画

    try {
      const response = await iotApi.fetchPermitData(); // 后端请求数据

      let rawData = await response; // 获取原始文本数据

      // 移除 HTML 标签
      rawData = rawData.replace(/<[^>]+>/g, '');

      // 移除注释部分
      rawData = rawData.replace(/\/\*[\s\S]*?\*\//g, '');

      // 如果数据不是一个数组，包裹在 [] 中
      if (!rawData.trim().startsWith('[')) {
        rawData = `[${rawData}]`;
      }

      // 尝试将清理后的数据解析为 JSON
      const data = JSON.parse(rawData);

      if (data && Array.isArray(data)) {
        permitData.value = data
        .filter(item => item.haspid)
        .map(item => ({
          ...item,
          // 中文化字段映射
          haspid: item.haspid || '',
          prname: item.prname || '',
          fn: item.fn || '',
          loc: item.loc || '',
          acc: item.acc || '',
          cnt: item.cnt || '',
          // 解析时间段
          //lic: parseLicPeriod(item.lic),
        }));
      } else {
        message.error('获取许可证信息失败');
      }
    } catch (err) {
      message.error('获取许可证信息失败');
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide(); // 隐藏加载动画
    }
  }

  // 解析许可证的时间段
  function parseLicPeriod(lic) {
    // 匹配并提取时间段信息
    const timeRegex = /Start:\s*([\w\s,]+)([\d\w\s:]+).*End:\s*([\w\s,]+)([\d\w\s:]+)/;
    const match = lic.match(timeRegex);

    if (match) {
      const start = match[1] + ' ' + match[2];  // 提取开始时间
      const end = match[3] + ' ' + match[4];    // 提取结束时间
      return `开始时间: ${start} | 结束时间: ${end}`;
    }

    return lic; // 如果没有匹配到，返回原始的 lic 字段
  }

  // 下载
  function downloadPermit() {
    iotApi.haspGetInfo();
  }

  // 页面加载时请求数据
  onMounted(() => {
    fetchPermitData();
  });
</script>

<style scoped lang="less">
  .permit-container {
    padding: 15px;
    background-color: #fff;
    box-shadow:
      0 1px 2px 0 rgba(0, 0, 0, 0.03),
      0 1px 6px -1px rgba(0, 0, 0, 0.02),
      0 2px 4px 0 rgba(0, 0, 0, 0.02);
    border-radius: 8px;
  }
  .permit-content {
    margin-bottom: 20px;
  }
  .permit-head {
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 700;
  }
  .button-list {
    display: flex;
    .button-card {
      margin-right: 20px;
    }
  }
</style>
